<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">房屋信息详情</div>
                <div>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="addtitle" style="margin-bottom: 20px;">房屋信息</div>
            <div class="detailcontent">
                <div class="detailitem1">{{ projectdetail.fwdz }}</div>
                <div class="detailitem">产权单位：{{ projectdetail.cqdw }}</div>
                <div class="detailitem">管房单位：{{ projectdetail.gfdw }}</div>
                <div class="detailitem">产别：{{ projectdetail.cb }}</div>
                <div class="detailitem">权证类型：{{ projectdetail.qzlx }}</div>
                <div class="detailitem">建筑面积：{{ projectdetail.jzmj }}</div>
                <div class="detailitem">房屋性质：{{ projectdetail.fwyt }}</div>
                <div class="detailitem">总层数：{{ projectdetail.zlc }}</div>
                <div class="detailitem">建筑年代：{{ projectdetail.jznd }}</div>
                <div class="detailitem">土地使用权类型：{{ projectdetail.tdsyqlx }}</div>
            </div>
            <div class="addtitle" style="margin-bottom: 10px;">其他信息</div>
            <div class="detailcontent">
                <div class="detailitem">评估价格：{{ form.pgjg }}</div>
                <div class="detailitem">评估时间：{{ form.pgsj ? form.pgsj.split(' ')[0] : ''}}</div>
                <div class="detailitem"></div>
            </div>
            <!-- style="font-size:16px;color: #fff;background-color:#05afbc;padding-left: 10px;box-sizing: border-box;" -->
            <div>评估报告</div>
            <div style="display:flex;margin-top: 20px;">
                <div style=" text-align: center;margin-right:10px;cursor: pointer;width: 100px;"
                    v-for="(item, index) in form.fja" :key="index" class="filebox">
                    <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px;"
                        @click="downloadfile(item.id, item.name, item.suffix)">
                    <div class="fileboxitem">{{ item.name }}</div>
                </div>
            </div>
            <!-- style="font-size:16px;color: #fff;background-color:#05afbc;padding-left: 10px;box-sizing: border-box;" -->
            <div>
                招租方案电子版</div>
            <div style="display:flex;margin-top: 20px;">
                <div style=" text-align: center;margin-right:10px;cursor: pointer;width: 100px;"
                    v-for="(item, index) in form.fjb" :key="index" class="filebox">
                    <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px;"
                        @click="downloadfile(item.id, item.name, item.suffix)">
                    <div class="fileboxitem">{{ item.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { builddetail, stdwdetails, download } from '@/api/index';
import global from '@/components/common/httpurl.vue'
import valueList from '@/components/common/valueList.vue'
import fileType from "../vo/filetype";
export default {
    name: 'stdwdetail',
    data() {
        return {
            // activeNames: ['1'],
            activeName: '',
            httpUrl: global.httpUrl,//公共地址
            glfslist: valueList.glfslist,//管理方式
            sflist: valueList.sflist,//是否列表
            fwztlist: valueList.fwztlist,//房屋状态列表
            filefileList: [],//文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            form: {
                buildid: "",//楼栋ID
                create_name: "",
                create_name_id: "",
                create_time: "",
                current: 0,
                czr: "",//承租人
                czyt: "",//承租用途
                fcbl: "",//分成比例
                fcje: "",//分成金额
                fja: "",
                fjb: "",
                fjc: "",
                fjd: "",
                fje: "",
                fjf: "",
                fjg: "",
                fjh: "",
                fji: "",
                fjj: "",
                fjk: "",
                fjl: "",
                fjm: "",
                fwzt: "",//房屋状态
                id: "",
                jfqk: "",//纠纷情况
                jmje: "",//减免金额 
                jmqssj: "",//减免起始时间
                jmzzsj: "",//减免终止时间 
                kzbz: "",//备注
                mzqssj: "",//免租起始时间
                mzzzsj: "",//免租终止时间
                nfcje: "",//年分成金额 
                pageSize: 0,
                pgjg: "",//评估价格
                pgsj: "",//评估时间
                qtsm: "",//其他说明
                qysj: "",//签约时间
                sfss: "",//是否涉诉
                ssqk: "",//诉讼情况 
                status_code: 1,
                tsyq: "",//特殊要求
                update_name: "",
                update_name_id: "",
                update_time: "",
                xsfzc: "",//修缮费支出
                xsqk: "",//修缮情况
                yjje: "",//押金金额
                yjzlsj: "",//预计租赁时间
                ys: "",//已收
                zj: "",//租金
                zjdj: "",//租金单价 
                zjnz: "",//租金年租
                zjsqfs: "",//租金收取方式
                zq: "",//租期 
                zqqssj: "",//租期起始时间
                zqzzsj: "",//租期终止时间
                zxfcbl: "",//中心分成比例
                zxje: "",//装修金额
                zzbz: "",//备注
                zzyy: ""//租金未按时缴纳原因
            },
            fileList: [],
            fromlist: [],
            projectdetail: {},
            rules: {
                name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
                address: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
                beginTime: [{ type: 'date', required: true, message: '请选择开工时间', trigger: 'change' }],
                completionTime: [{ type: 'date', required: true, message: '请选择计划竣工时间', trigger: 'change' }],

                chargenameB: [{ required: true, message: '请输入乙方负责人', trigger: 'blur' }],
                phoneB: [
                    { required: true, message: '请输入乙方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ],
                company: [{ required: true, message: '请输入乙方公司名称', trigger: 'blur' }],
                chargenameA: [{ required: true, message: '请输入甲方项目负责人', trigger: 'blur' }],
                phoneA: [
                    { required: true, message: '请输入甲方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ]
            }
        };
    },
    methods: {
        // 点击展开折叠功能
        getzt(e) {
            console.log(e)
            if (e == '招租中') {
                this.activeName = '1'
            } else if (e == '招租') {
                this.activeName = '2'
            } else if (e == '出租') {
                this.activeName = '3'
            } else if (e == '运营') {
                this.activeName = '4'
            }
        },
        // 折叠功能
        handleChange(val) {
            console.log(val);
        },
        // 创建
        submitForm() {
            console.log(this.form)
            stdwadd(this.form).then((res) => {
                if (res.code == 200) {
                    this.$message.success('编辑成功');
                    this.$router.go(-1);
                } else {
                    this.$message.error('编辑失败');
                }
            });
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 文件
        handleRemoves(file, fileList, filetype) {
            console.log(fileList)
            console.log('filetype', filetype)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this.form[filetype] = this.fileListshandle.toString()

        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists, filetype) {
            console.log(fileLists)
            console.log('filetype', filetype)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this.form[filetype] = this.fileListshandle.toString()
        },

        // 楼幢详情
        builddetail(data) {
            builddetail(data).then((res) => {
                this.projectdetail = res.data;
            });
        },
        // 受托单位详情
        stdwdetails(data) {
            stdwdetails(data).then((res) => {
                console.log('受托单位',res.data)
                this.form = res.data;
            });
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id)
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            download(data).then(res => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)

            })
        }
    },
    created() {
        let stdwxqdata = {
            id: this.$route.params.id
        }
        this.stdwdetails(stdwxqdata)
        console.log('params', this.$route.params)
        let data = {
            id: this.$route.params.id
        };
        this.builddetail(data);
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: 140px;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    /* margin-bottom: 20px; */
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008A94;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.fileboxitem:hover {
    color: #7090ff;
}

.deleteitem {
    color: red;
}

.deleteitem:hover {
    color: #eeeeee;
}
</style>